<template>
	<div class="page-wrapper">
		<!-- <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="state.queryForm.name" placeholder="名称" clearable style="width: 200px;"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()" type="primary">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button @click="clearForm()">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="addOrUpdateHandle()" v-if="hasRule('admin/product/list/index/add')">新增</el-button>
			</el-form-item>
		</el-form> -->
		<el-table v-loading="state.dataListLoading" :data="dataList" border style="width: 100%" width="100%" height="100%">
            <!-- @selection-change="selectionChangeHandle"  -->
			<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
			<el-table-column prop="created_at" :label="$t('cm.f1')" header-align="center" align="center" width="180"></el-table-column>
			<el-table-column prop="name" :label="$t('cm.f2')" header-align="center" align="center"></el-table-column>
			<el-table-column prop="email" :label="$t('cm.h19')" header-align="center" align="center"></el-table-column>
			<el-table-column prop="title" :label="$t('cm.h12')" header-align="center" align="center"></el-table-column>
			<el-table-column prop="content" :label="$t('cm.h13')" header-align="center" align="center"></el-table-column>
			<el-table-column prop="msg" :label="$t('cm.p10')" header-align="center" align="center"></el-table-column>
			<!-- <el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
				<template #default="scope">
					<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)" v-if="hasRule('admin/product/list/index/update')">修改</el-button>
					<el-button type="danger" link @click="deleteHandle(scope.row.id)" v-if="hasRule('admin/product/list/index/delete')">删除</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.per_page"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<!-- <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update> -->
        <el-dialog v-model="visible" :title="title" width="1200px" center :destroy-on-close="true">
           <div class="w100">
            <el-scrollbar height="600px">
                <el-table :data="itemList" border style="width: 100%" width="100%" height="100%">
                    <el-table-column prop="images" label="属性名称" header-align="center" align="center">
                        <template #default="scope">
                            <div class="w100 flex flexL flexC">
                                <div class="mr10 flex flexL" v-if="scope.row.images">
                                    <el-image
                                        style="width: 30px; height: 30px;border-radius: 2px;"
                                        :src="scope.row.images"
                                        preview-teleported
                                        :preview-src-list="[scope.row.images]"
                                        :initial-index="0"
                                        fit="cover"
                                        />
                                </div>
                                <div>{{scope.row.attr_name_fill}}-{{scope.row.attr_name}}</div>
                                <!-- <div v-if="scope.row.attr?.diy_attr">
                                    <el-tooltip
                                        :content="showDiyAttr(scope.row.attr.diy_attr)"
                                        placement="right"
                                        trigger="click"
                                        raw-content
                                    >
                                        <span class="font12 c999 pointer">(查看自定义属性)</span>
                                    </el-tooltip>
                                </div> -->
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="inventory" label="当前库存" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="warning" label="库存预警" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="created_at" label="添加时间" header-align="center" align="center"></el-table-column>
                </el-table>
            </el-scrollbar>
           </div>
        </el-dialog>
        <el-dialog v-model="visible2" :title="title" width="600px" center :destroy-on-close="true">
           <div class="w100">
            <el-scrollbar height="400px">
                <el-table :data="specList" border style="width: 100%" width="100%" height="100%">
                    <el-table-column prop="spec_label" label="规格名称" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="spec_value" label="规格值" header-align="center" align="center"></el-table-column>
                </el-table>
            </el-scrollbar>
           </div>
        </el-dialog>
	</div>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, computed, onMounted } from 'vue'
// import AddOrUpdate from './add-or-update.vue'
import { IHooksOptions } from '@/hooks/interface'
import { hasRule } from '@/utils/tool'
import { getFeedBackList, getSystemConfig, useProductSpecListApi } from '@/api/api'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const state: IHooksOptions = reactive({
	dataListUrl: '/api/shop/feedback/list',
	deleteUrl: '/api/shop/feedback/delete',
	queryForm: {
		name: '',
        not_material: 1,
	}
})
const dataList = computed(() => {
    return state.dataList.map(item => {
        return {
            ...item,
            images: item.images&&item.images!='[]'?item.images.split(','):[]
        }
    })
})
const title = ref('');
const visible = ref(false);
const visible2 = ref(false);
const itemList = ref([]);
const specList = ref([]);
const diyAttrList = ref([]);
const clearForm = () => {
    state.queryForm.name = '';
    getDataList();
}
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number, isRole?: any) => {
	addOrUpdateRef.value.init(id, isRole)
}
const handleSku = (row) => {
    title.value = row.name+'产品属性列表'
    itemList.value = [];
    visible.value = true;
    getFeedBackList(row.id).then((result) => {
        itemList.value = result.data.sku;
    }).catch((err) => {
        
    });
}
const handleSpec = (row) => {
    if (row.spec_contents) {
        title.value = row.name+'产品规格列表'
        specList.value = [];
        visible2.value = true;
        const list = JSON.parse(row.spec_contents);
        useProductSpecListApi().then((result) => {
            specList.value = list.map(item => {
                const specitem = result.data.find(i => i.id == item.spec_id);
                return {
                    spec_label: specitem.name || '',
                    spec_value: item.spec_value
                }
            });
        }).catch((err) => {
            
        });
    }
}
const getDiyAttr = () => {
    getSystemConfig('diyattr').then((res) => {
        if (res.data.value) {
            diyAttrList.value = JSON.parse(res.data.value);
        }
    }).catch((err) => {
        
    });
}
const showDiyAttr = (value) => {
    let showValue = [];
    if (value) {
        const val = JSON.parse(value);
        val.forEach(item => {
            const attritem = diyAttrList.value.find(i => i.value==item.attr_id);
            if (attritem) {
                showValue.push(attritem.label+'：'+item.attr_value)
            }
        })
    }
    return `<div class="hh">${showValue.join('\r\n')}</div>`;
}
// onMounted(() => {
//     getDiyAttr();
// })
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteHandle } = useCrud(state,t)
</script>
